<template>
  <div class="RaidersDetails" ref="homePage">
    <div class="bj">
       <van-nav-bar title="精彩攻略" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img width="100%" height="100%" :src="image.ImgSrc" />
      </van-swipe-item>
    </van-swipe>
    <div class="travels">
       <div class="travels_left">
         <img :src="datalist.AuthorAvatarUrl " />
         <div class="left_txt">
           <span style="font-size: 16px;">{{datalist.Author}}</span>
           <span>{{datalist.PublishDate}}</span>
         </div>
       </div>
       <div class="travels_right">
         <div>
           <van-icon name="eye" />
           <span>{{datalist.ViewNum}}</span>
         </div>
         <div class="LikeNum" @click="likedataA(2)" :class="{'likeactive':datalist.IsLike == true}">
           <van-icon name="like" />
           <span>{{datalist.LikeNum}}</span>
         </div>
       </div>
    </div>
    <div v-html="datalist.Content" class="Content"></div>
  </div>
</template>

<script>
  import {
    ArticleDetails,
    MyMarkDo
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        images: [
          // 'https://resource.sz-trip.com/uploads/20180612/ca83b168e92ea2751a6689e38608eb8a.jpg',
          // 'https://resource.sz-trip.com/uploads/20180612/ca83b168e92ea2751a6689e38608eb8a.jpg'
        ],
        datalist:[],

      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.ArticleDetails();
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      ArticleDetails(){
        let data = {
          artSN:this.$route.query.artSN,

        }
        ArticleDetails(data).then(res=>{
          this.images = res.Item.FocusImgs
          // console.log(this.images)
          this.datalist = res.Item
          console.log(res)
        })
      }, 
      likedataA(num){
        let data = {
          SN:this.$route.query.artSN,
          Type:num,
          Module:"Article",
        }
        MyMarkDo(data).then(res=>{
          console.log(res);
          if (res.Code == 0) {
             this.ArticleDetails()
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .RaidersDetails {
    background: white;
    .bj{
      .van-icon {
        color: white !important;

      }
    }

    .van-swipe{
      width: 100%;
      height: 200px;
    }
    .travels{
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
  	  border-bottom: 10px solid #F0F0F0;
      .travels_left{
        display: flex;
        align-items: center;
        img{
          width: 60px;
          height: 60px;
          border-radius: 30px;
        }
        .left_txt{
          display: flex;
          flex-direction: column;
          margin-left: 10px;
        }
      }
      .travels_right{
        display: flex;
        div{
          display: flex;
          align-items: center;
          margin: 0 5px;
        }
        .LikeNum{
          .van-icon{
            color: #5C5C5C !important;
          }
        }
        .likeactive{
          .van-icon{
            color: #46d0ca !important;
          }
        }
      }
    }

    .Content{
      width: 90%;
      margin: 0 auto;
  	  padding-top: 10px;
      img{
        width: 100%;

      }
      a{
        color: #5c5c5c;
      }
    }

  }
</style>
